<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="robots" content="index, follow" />

<title>Макет плавающий</title>
<meta name="Description" content="" />
<meta name="Keywords" content="" />

<link href="css/reset.css" rel="stylesheet" type="text/css" media="all" />
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<!--[if lte IE 6]><link href="css/ie6.css" rel="stylesheet" type="text/css" media="all" /><![endif]-->
<!--[if IE 7]><link href="css/ie7.css" rel="stylesheet" type="text/css" media="all" /><![endif]-->
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javaScript" src="js/jquery.chili.js"></script> 
<script type="text/javascript"> ChiliBook.recipeFolder = "js/chili/";  </script> 
<script type="text/javascript" src="js/nth.script.js"></script>
<!--[if lte IE 6]><script type="text/javascript" src="js/iepngfix_tilebg.js"></script><![endif]-->
</head>
<body>
<div id="page">

  <div id="header">
    <a href="#" class="site-logo" title="На главную"><img src="pict/logo.png" alt="Название сайта" /></a>
    <p class="site-description">В стремлении к идеалу</p>
  </div><!-- /header -->

  <div id="nav">
    <ul>
      <li><a href="#" id="nav-active">Главная</a></li>
      <li><a href="#">Услуги</a></li>
      <li><a href="#">О проекте</a></li>
      <li><a href="#">Контакт</a></li>
    </ul>
  </div><!-- /nav -->

  <div id="wrap">
    <div id="content"><div class="padding">
<!-- begin sample HTML -->
<p>Это страница, демонстрирующая работу NTH-фреймворка версии 1.2. Подробнее о фреймфорке — на <a href="http://nicothin.ru/tag/nth-frejmvork">сайте автора</a>.</p>

<h1>Заголовок 1</h1>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.Etiam viverra augue non enim.Etiam viverra augue non.</p>
<p class="relative more"><a href="http://nicothin.ru">Читать далее</a></p>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.Morbi convallis felis vel nibh. Etiam viverra augue non enim.Morbi convallis felis vel nibh. </p>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. <a href="#">Duis arcu. Integer dignissim</a> fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.Morbi convallis felis vel nibh. Etiam viverra augue non enim.Morbi convallis felis vel nibh. </p>
<p>Sed scelerisque sagittis lorem. <a href="#">Phasellus</a> sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.Morbi convallis felis vel nibh. Etiam viverra augue non enim.Morbi convallis felis vel nibh. </p>
<h2>Заголовок 2</h2>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<h3>Заголовок 3</h3>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<h4>Заголовок 4</h4>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<h5>Заголовок 5</h5>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<h6>Заголовок 6</h6>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<blockquote><p>В западной традиции в качестве рыбы используется кусок латинского текста из философского трактата Цицерона «О пределах добра и зла», написанного в 45 году до нашей эры. Впервые этот текст был применен для набора шрифтовых образцов неизвестным печатником еще в XVI веке. </p>
<p>В западной традиции в качестве рыбы используется кусок латинского текста из философского трактата Цицерона «О пределах добра и зла», написанного в 45 году до нашей эры. Впервые этот текст был применен для набора шрифтовых образцов неизвестным печатником еще в XVI веке. </p>
<p>В западной традиции в качестве рыбы используется кусок латинского текста из философского трактата Цицерона «О пределах добра и зла», написанного в 45 году до нашей эры. Впервые этот текст был применен для набора шрифтовых образцов неизвестным печатником еще в XVI веке. </p>
</blockquote>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.Morbi convallis felis vel nibh. Etiam viverra augue non enim.Morbi convallis felis vel nibh. </p>

<address>
Тег &lt;address&gt;: Россия, Санкт-Петербург, 000 000, Ул. Пети Пупкина, д. 12, Кв. 6
</address>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.Etiam viverra augue non enim.Etiam viverra augue non.</p>
<pre><code class="css">h5 {font-size: 1.2em; margin: 1.33em 0 .67em}
h6 {font-size: 1.0em; margin: 1.6em 0 .8em}
cite, em, dfn, i {font-style: italic}
#test {}
 /* комментарий */
.test {}
code, kbd, samp, pre, tt, var {font-size: 92%; font-family: "Lucida Console", "Courier New", Courier, monospaced;}
pre code {font-size: 100%} 
pre {border:1px solid #d4d4d4; width:100%!important; overflow:scroll; position:relative; padding:.5em}
del, strike, s  {text-decoration: line-through; color: #666}
</code></pre>
<pre><code class="html">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;

&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;div&gt;
  &lt;ul id=&quot;<strong>sur</strong>&quot;&gt;
    &lt;li&gt;Пункт 01&lt;/li&gt;
    &lt;li&gt;Пункт 02&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Контакт&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;Пункт 05&lt;/li&gt;
  &lt;/ul&gt;
  &lt;!-- тут комментарий --&gt;
  &lt;p class=&quot;jopa&quot;&gt;Sed scelerisque sagittis lorem. Phasellus sodales.&lt;/p&gt;
&lt;/div&gt;<br /></code></pre>
<p><a href="http://nicothin.ru"><img src="pict/logo.png" alt="logo" /></a></p>
<p>
Тег &lt;a&gt;: <a href="http://nicothin.ru">ссылка</a><br />
Тег &lt;abbr&gt;: <abbr title="Государственное Общеобразовательное Учреждение Высшего Профессионального Образования Санкт-Петербургская Медицинская Академия" >ГОУВПОСПбГМА</abbr><br />
Тег &lt;acronym&gt;: <acronym title="Так называют промывающих мозги по политической линии хмырей">замполит</acronym><br />
Тег &lt;b&gt;: <b>старожирный текст</b><br />
Тег &lt;big&gt;: <big>как бы, большой текст</big><br />
Тег &lt;cite&gt;: <cite>цитата</cite><br />
Тег &lt;code&gt;: <code>код PHP</code><br />
Тег &lt;del&gt;: <del>текст, который удален</del><br />
Тег &lt;dfn&gt;: <dfn>Кернинг</dfn><br />
Тег &lt;em&gt;: <em>акцентированный текст</em><br />
Тег &lt;i&gt;: <i>наклонный текст</i><br />
Тег &lt;ins&gt;: <ins>добавленный в новую версию документа текст</ins><br />
Тег &lt;kdb&gt;: <kbd>&lt;Alt&gt;+&lt;Backspace&gt;</kbd><br />
Тег &lt;q&gt;: <q>цитата в тексте, некорректно воспринимаемая IE</q><br />
Тег &lt;s&gt;: <s>зачеркнуто</s><br />
Тег &lt;samp&gt;: <samp>вывод результата работы скрипта</samp><br />
Тег &lt;small&gt;: <small>как бы, маленький текст</small><br />
Тег &lt;strike&gt;: <strike>зачеркнуто</strike><br />
Тег &lt;strong&gt;: <strong>жирный текст</strong><br />
Тег &lt;sub&gt;: <sub>нижний индекс</sub><br />
Тег &lt;sup&gt;: <sup>верхний индекс</sup><br />
Тег &lt;tt&gt;: <tt>моноширный текст</tt><br />
Тег &lt;var&gt;: <var>$pupnik</var><br />
Тег &lt;u&gt;: <u>подчеркнуто</u></p>
<hr />
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<ul>
	<li>Пункт 01
      <ul>
	  <li>Пункт 01
        <ul>
	    <li>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo.</li>
	    <li>Пункт 02</li>
	    <li>Пункт 03</li>
        </ul>
      </li>
	  <li>Пункт 02</li>
	  <li>Пункт 03</li>
      </ul>
    </li>
	<li>Пункт 02</li>
	<li>Пункт 03</li>
</ul>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<p>Следующий нумерованный список имеет класс &quot;relative&quot; (это прижимает его к предыдущему параграфу):</p>
<ol class="relative">
	<li>Пункт 01</li>
	<li>Пункт 02</li>
	<li>Пункт 03</li>
</ol>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<ol>
	<li>Пункт 01</li>
	<li>Пункт 02</li>
	<li>Пункт 03
		<ul>
			<li>Подпункт 03-01</li>
			<li>Подпункт 03-02
			  <ol>
					<li>Подпункт 3-го уровня</li>
					<li>Подпункт 3-го уровня</li>
				</ol>
			</li>
            <li>Подпункт 03-03</li>
		    <li>Подпункт 03-04</li>
		</ul>
	</li>
    <li>Пункт 04</li>
    <li>Пункт 05</li>
</ol>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<dl>
	<dt>Термин 01</dt>
	<dd>Определение термина 01</dd>
    
	<dt>Термин 02</dt>
	<dd>Определение термина 02</dd>
</dl>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<table>
	<caption>Заголовок таблицы</caption>

	<thead>
		<tr>
			<th>thead th</th>
			<td>05</td>
			<td>&nbsp;</td>
			<td>thead td</td>
		</tr>
	</thead>
	<tfoot>
		<tr>

			<th>tfoot th</th>
			<td>500</td>
			<td>&nbsp;</td>
			<td>tfoot td</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th>tbody th</th>
			<td>&nbsp;</td>
			<td>Sed scelerisque sagittis lorem. </td>
			<td>tbody td</td>
		</tr>
		<tr>
			<td>tbody td</td>
			<td>&nbsp;</td>
			<td>Sed scelerisque sagittis lorem. </td>
			<td>tbody td</td>
		</tr>
        <tr>
			<td>tbody td</td>
			<td>&nbsp;</td>
			<td>Sed scelerisque sagittis lorem. </td>
			<td>tbody td</td>
		</tr>
        <tr>
			<td>tbody td</td>
			<td>&nbsp;</td>
			<td>Sed scelerisque sagittis lorem. </td>
			<td>tbody td</td>
		</tr>
        <tr>
			<td>tbody td</td>
			<td>&nbsp;</td>
			<td>Sed scelerisque sagittis lorem. </td>
			<td>tbody td</td>
		</tr>
        <tr>
			<td>tbody td</td>
			<td>&nbsp;</td>
			<td>Sed scelerisque sagittis lorem. </td>
			<td>tbody td</td>
		</tr>
        <tr>
			<td>tbody td</td>
			<td>&nbsp;</td>
			<td>Sed scelerisque sagittis lorem. </td>
			<td>tbody td</td>
		</tr>
	</tbody>
</table>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<form action="#">
<fieldset>
<legend>Form legend</legend>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<div><label for="f1">Text input:</label> <input type="text"  id="f1" value="input text" /></div>
<div>
<input type="radio" name="group1" id="f2" />
<label for="f2">radio1</label>
<br />
<input type="radio" name="group1" id="f21" />
<label for="f21">radio2</label>
<br />
<input type="radio" name="group1" id="f22" />
<label for="f22">radio3</label>
</div>
<div>
 <label for="f3">Checkbox:</label>
 <input type="checkbox"  id="f3" /></div>
<div><label for="f4">Select field:</label> <select id="f4"><option>Option 01</option><option>Option 02</option></select></div>
<div><label for="f5">Textarea:</label><br /><textarea id="f5" cols="30" rows="5" >Textarea text</textarea></div>
<div><label for="f6">Button:</label> <input type="button" class="button" id="f6" value="button text" /></div>
</fieldset>
</form>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<!-- end sample HTML -->
        </div></div><!-- /contant & /padding -->
    
        <div id="aside"><div class="padding">
    <div class="search">
      <h2>Поиск</h2>
      <form id="search-form" method="get" action="index.php">
        <input type="text" class="search-text" value="Поиск по сайту" name="s" id="s" />
        <input type="submit" class="search-button button" value="Найти" />
      </form>
    </div><!-- /search -->
    <div class="login">
      <h2>Вход</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      <form action="index.php" method="post" name="login-form" id="login-form" >
        <div class="username">
          <label for="username">Пользователь:</label>
          <input type="text" name="username" id="username" size="18"  />
        </div>
        <div class="password">
          <label for="password">Пароль:</label>
          <input type="password" name="password" id="password" size="18"  />
        </div>
        <div class="remember">
          <input type="checkbox" name="remember" id="remember" value="yes" alt="Запомнить" />
          <label for="remember">Запомнить</label>
        </div>
        <div class="submit">
          <input type="submit" name="Submit" class="button" value="Войти" />
        </div>
        <ul>
          <li><a href="#">Зарегистрироваться</a></li>
          <li><a href="#">Восстановить пароль</a></li>
        </ul>
      </form>

    </div><!-- /login -->
    <div class="contact">
      <h2>Контакт</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      <ul>
        <li><span class="contact-type">телефоны:</span> <span class="contact-item">+00 000 000 0000<br />+00 000 000 0000</span></li>
        <li><span class="contact-type">факс:</span> <span class="contact-item">+00 000 000 0000</span></li>
        <li><span class="contact-type">skype:</span> <span class="contact-item"><a href="skype:name">name</a></span></li>
        <li><span class="contact-type">icq:</span> <span class="contact-item">000-000-000<br />000-000-000</span></li>
        <li><span class="contact-type">e-mail:</span> <span class="contact-item"><a href="mailto:manager@mail.ru">manager@mail.ru</a><br /><a href="mailto:director@mail.ru">director@mail.ru</a></span></li>
      </ul>
    </div><!-- /contact -->
    <!--[if IE 6]>
    <div class="ie6-must-die">
      <h2>Внимание!!!</h2>
      <p>Вы используете браузер Internet Explorer 6, выпущенный в 2001 году. Это самый небезопасный и морально устаревший браузер, «божий дар хакера».</p>
      <p>Настоятельно рекомендуем скачать и установить быстрый и безопасный браузер <a href="http://www.mozilla-europe.org/ru/">Firefox</a> (это бесплатно). </p>
    </div><![endif]-->
        </div></div><!-- /aside & /padding -->
    </div><!-- /wpap -->

    <div id="footer">
        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo.</p>
    </div><!-- /footer -->

</div><!-- /page -->
</body>
</html>